import React, { useContext, useState } from "react";
import MyContext from "./contexts/MyContext";

import Header from "./components/Header";

/**
 * 一、使用 Context.Consumer
 */
// function App() {
//   return (
//     <MyContext.Consumer>
//       {(value) => {
//         console.log(value);
//         return (
//           <div>
//             <h1>App</h1>
//           </div>
//         );
//       }}
//     </MyContext.Consumer>
//   );
// }

/**
 * 二、使用 useContext
 */
// function App() {
//   // useContext(Context)
//   //  1. 接收的是一个 Context 对象，也就是通过 React.createContext() 创建出来的那个对象
//   //  2. 返回值，就是 Context 对象对应着的数据
//   const value = useContext(MyContext);

//   console.log(value);

//   return (
//     <div>
//       <h1>App</h1>
//     </div>
//   );
// }

function App() {
  const [style, setStyle] = useState({ color: "red", background: "#fff" });

  function changeColor(color) {
    setStyle((prevStyle) => ({
      ...prevStyle,
      color: color,
    }));
  }

  return (
    <MyContext.Provider value={style}>
      <div>
        <h1>App</h1>
        <button
          onClick={() => {
            changeColor("green");
          }}
        >
          修改
        </button>
        <Header />
      </div>
    </MyContext.Provider>
  );
}

export default App;
